<template>
	<p>{{txt}}</p>
	<p id="p1"></p>
	<input type="button" value="点击打印信息" v-on:click="showmsg"><br />
	<input type="button" value="点击打印信息2" @click="showmsg2"><br />
</template>

<script setup>
	import { ref,reactive } from 'vue';
	//事件绑定指令，要给DOM元素绑定事件,v-on指令
	//<标签名 v-on:事件名="事件处理器"></标签名>
	//事件名即DOM中的事件名，例如click、input、keyup等
	//事件处理器可以是方法名或内联JavaScript语句
	//可以将“v-on:事件名”简写为“@事件名”
	
	//定义变量
	const txt=ref('陈俊光');
	
	
	//定义函数
	const showmsg=function(){
		console.log('学习v-on指令')
	}
	
	const showmsg2=()=>{
		// console.log('学习v-on指令2')
		txt.value='余豪佳'
		document.getElementById('p1').innerText=txt.value
	}

</script>

<style>
</style>